<template>
  <div :id="hasPreview ? info._id : `diy_${info._id}`" ref="chart" class="ui-line-chart h-full byd-monitor">
    <div v-for="(item, i) in itemList" :key="i" class="byd-monitor-item">
      <video v-if="item.url" controls class="w-full h-full" loop name="media">
        <source :src="item.url" type="video/mp4" />
      </video>
    </div>
    <!-- <video class="w-full h-full" autoplay controls loop name="media">
      <source src="https://vd3.bdstatic.com/mda-pce58ym94wcvhitd/sc/cae_h264/1678852029042811287/mda-pce58ym94wcvhitd.mp4" type="video/mp4" />
    </video> -->
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'UiBydMonitor',
    components: {},
    mixins: [UiMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      urls: {
        required: true,
        type: Array,
        default: () => [],
      },
      // info: {
      //   required: true,
      //   type: Object,
      //   default: function () {
      //     return {}
      //   },
      // },
    },
    data() {
      return {
        itemList: [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.urls.forEach((r) => {
          this.itemList.push({ url: r })
        })
        console.log('mounted', this.itemList)
      })

      // this.itemList
    },
  })
</script>
<style lang="scss">
  .byd-monitor {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .byd-monitor-item {
      width: 38%;
    }
  }
</style>
